<template>
  <view class="container">
    <view class="item" v-for="item in 15" :key="item">
      <image src="../../../static/icon/home/nav-item.png" mode="widthFix"></image>
      <view class="text"> 休闲娱乐 </view>
    </view>
  </view>
</template>

<script>
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    height: 258px;
    background-color: #fff;
    border-radius: 10px;
    padding: 9px;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 创建5列 */
    grid-template-rows: repeat(3, 1fr); /* 创建3行 */
    gap: 9px 16px; /* 如果需要间距，可以设置为非零值 */
    box-sizing: border-box; /* 确保内边距不会增加容器大小 */
    .item {
      image {
        width: 54px;
      }
      .text {
        width: 48px;
        height: 13px;
        font-size: 12px;color: #333333;
        font-weight: 400;
      }
    }
  }
</style>